<template>
	<view class="container">
		<view class="top-wrapper" v-if="!catId">
			<view class="search-wrapper">
			  <image src="/static/search.png" class="icon"></image>
			  <input class="uni-input" v-model="name" placeholder="请输入商品名" @focus="nameFocus" @input="nameInput"/>
			</view>
			<button :disabled="!name" class="search" @click="search">搜索</button>
		</view>
		<view class="place" v-if="!catId"></view>
		<view class="content">
			<view :hidden="isSearch" v-if="!catId">
				<view class="tag-wrapper">
					<view class="title">热门搜索</view>
					<view class="con">
						<view class="tag-list">
							<view class="tag-item" v-for="(hotSearchKey, index) in hotSearchKeyList" @click="hotSearch(hotSearchKey.keyword)" :key="index"><image src="/static/hot.png" class="icon" v-if="index === 0"></image>{{hotSearchKey.keyword}}</view>
						</view>
						<view class="delet">
							<!-- <image src="/static/delet.png" class="icon"></image>清空 -->
						</view>
					</view>
				</view>
				<view class="tag-wrapper">
					<view class="title">搜索记录</view>
					<view class="con">
						<view class="tag-list">
							<view class="tag-item" v-for="(searchRecord, index) in searchRecordList" @click="hotSearch(searchRecord.keyword)" :key="index">
							{{searchRecord.keyword}}</view>
						</view>
						<view class="delet" v-if="searchRecordList.length" @click="handleClearSearchRecord">
							<image src="/static/delet.png" class="icon"></image>清空
						</view>
					</view>
				</view>
			</view>
			<view class="product-wrapper" :hidden="!isSearch">
				<view class="product-list" v-if="list.length > 0">
					<product v-for="product in list" :product="product" :key="product.id"></product>
				</view>
				<view class='no-data' v-if="list.length < 1 && isLoad">暂无数据</view>
				<view class='end' v-if="loadingFinsh && list.length > 0">没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import product from './product.vue'
	import { frontPage } from '@/api/product.js'
	import { hotSearchKey, searchRecord, clearSearchRecord } from '@/api/other.js'
	var inputFlag = false
	export default {
		components: {product},
		data() {
			return {
				searchRecordList: [],
				hotSearchKeyList: [],
				catId: '',
				isSearch: false,
				name: '',
				list: [],
				isLoad: false,
				loadingFinsh: false,
				loadingShow: false,
				totalCount: 0,
				pageNum: 1,
				pageSize: 10
			}
		},
		onLoad(option) {
			if (option.catId) {
				this.catId = option.catId
				uni.setNavigationBarTitle({
				　　title: option.title
				})
				this.getList()
			} else {
				this.getHotSearchKey()
				this.getSearchRecord()
			}
		},
		onReachBottom() {
			this.pageNum = this.pageNum + 1
			this.getList()
		},
		methods: {
			// 热门搜索
			getHotSearchKey() {
				hotSearchKey().then(respanse => {
					this.hotSearchKeyList = respanse.result
				})
			},
			
			// 搜索记录
			getSearchRecord() {
				searchRecord().then(respanse => {
					this.searchRecordList = respanse.result
				})
			},
			
			// 清空记录
			handleClearSearchRecord() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定清空搜索记录？',
					success: function (res) {
						if (res.confirm) {
							clearSearchRecord().then(respanse => {
								that.searchRecordList = []
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			
			getList() {
			  const len = this.list.length
			  if (this.totalCount == len && this.isLoad) {
			    this.loadingFinsh = true,
			    this.loadingShow = false
			    return
			  }
			  this.loadingShow = true
			  const data = {
			    type: 2,
				catId: this.catId,
			    // name: this.name,
			    pageNum: this.pageNum,
			    pageSize: this.pageSize
			  }
			  if (this.name) {
				  data.name = this.name
			  }
			  frontPage(data).then(respanse => {
				const { rows, total } = respanse.result
				if (rows) {
					this.list = this.list.concat(rows)
				}
			    this.totalCount = total
			    this.isLoad = true
			    this.loadingShow = false
				this.isSearch = true
				if (!this.catId) {
					this.getSearchRecord()
				}
			  })
			},
			nameFocus() {
				inputFlag = false
			},

			// 热门搜索
			hotSearch(name) {
				inputFlag = true
				this.name = name
				this.resetList()
				this.getList()
			},

			search() {
				this.resetList()
				this.getList()
			},

			resetList(){
				this.list = []
				this.isLoad = false
				this.loadingFinsh = false
				this.loadingShow = false
				this.totalCount = 0
				this.pageNum = 1
			},

			// 监听输入
			nameInput(e) {
			  if (inputFlag) return
			  this.name = e.target.value
			  if (!this.name) {
				this.isSearch = false
			  } else {
				this.isSearch = true
			  }
			}
		}
	}
</script>
<style>
	body{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.top-wrapper{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
		display: flex;
		padding: 21rpx 0 21rpx 28rpx;
		background-color: #fff;
		.search{
			width: 94rpx;
			height: 63rpx;
			line-height: 63rpx;
			font-size: 28rpx;
			color: #EA5D2F;
			background: none;
			&[disabled]{
				background: none !important;
				color: #BCBCBC;
			}
		}
		.search-wrapper{
			position: relative;
			height: 63rpx;
			flex: 1;
			border: 1px solid #E5E5E5;
			border-radius: 32rpx;
			.icon{
				position: absolute;
				left: 33rpx;
				top: 20rpx;
				width: 28rpx;
				height: 23rpx;
			}
			.uni-input{
				display: block;
				padding-left: 70rpx;
				width: 100%;
				height: 63rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #333;
			}
			background-color: #F8F8F8;
		}
	}
	.place{
		height: 105rpx;
		visibility: hidden;
	}
	.product-wrapper{
		padding: 30rpx 28rpx 0;
		.title{
			line-height: 48rpx;
			font-size: 38rpx;
			font-weight: bold;
			color: #333333;
		}
		.product-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 26rpx;
		}
	}
	.tag-wrapper{
		padding: 32rpx 0 0 28rpx;
		.title{
			line-height: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		.con{
			display: flex;
			margin-top: 20rpx;
			.tag-list{
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				.tag-item{
					padding: 0 23rpx;
					margin: 0 20rpx 20rpx 0;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #666;
					background: #F8F8F8;
					border-radius: 30rpx;
					.icon{
						display: inline-block;
						vertical-align: top;
						margin: 16rpx 8rpx 0 0;
						width: 22rpx;
						height: 26rpx;
					}
				}
			}
			.delet{
				width: 126rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #666666;
				.icon{
					display: inline-block;
					vertical-align: top;
					margin: 15rpx 8rpx 0 0;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	button[disabled] {
		color: #999 !important;
	}
</style>
